<template>
  <div id="user">
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- 搜索与添加区域 -->
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable>
            <template #append>
              <el-button>
                <el-icon>
                  <search @click="getUserList" />
                </el-icon>
              </el-button>
            </template>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区域  -->
      <el-table :data="userlist" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email" width="190px"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="角色" prop="role_name"></el-table-column>
        <el-table-column label="状态" prop="mg_state">
          <!-- 引用switch开关组件 -->
          <template v-slot="scope">
            <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template v-slot="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" v-model="scope.row.Id" @click="showEditDialog()">
              <el-icon>
                <edit />
              </el-icon>
            </el-button>
            <!-- 删除按钮 -->
            <el-button type="danger"><el-icon>
                <delete />
              </el-icon></el-button>
            <!-- 分配角色按钮 -->
            <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning">
                <el-icon>
                  <setting />

                </el-icon>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 页面区域  分页跳转-->
      <!-- <el-pagination :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination> -->
      <el-pagination v-model:current-page="queryInfo.pagenum" v-model:page-size="queryInfo.pagesize"
        :page-sizes="[1, 2, 5, 10]" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>

    <!-- 添加用户的对话框 -->
    <el-dialog v-model="addDialogVisible" title="提示" width="50%" @close="addDialogClosed">
      <!-- 内容主体内容 -->
      <el-form :model="addForm" :relues="addFromRules" ref="addForm" label-tidth="70px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addDialogVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改用户的对话框 -->
    <el-dialog v-model="editDialogVisibel" title="修改用户" width="50%">
      <!-- 内容 -->
      <el-form :model="editFrom" ref="addFormRef" label-width="120px">
        <el-form-item label="用户名">
          <el-input/>
        </el-form-item>
      </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editDialogVisibel = false">取消</el-button>
            <el-button type="primary" @click="editDialogVisibel = false">
              提交
            </el-button>
          </span>
        </template>
    </el-dialog>

  </div>
</template>
 
<script >
import axios from 'axios';
export default {
  data() {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        query: '', // 查询参数
        // 当前页数
        pagenum: 1,
        // 每页显示多少条条数
        pagesize: 2
      },
      // 用户列表
      userlist: [],
      // 总数据条数
      total: 0,


      //控制添加用户对话框的现实与隐藏
      addDialogVisible: false,
      //添加用户的表单数据
      addForm: {
        username: ''
      },
      //添加表单的验证规则对象
      addFromRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: "blur" }, { min: 3, max: 10, message: '用户名的长度在3-10哥字符之间', trigger: 'blur' }
        ]
      },
      //控制修改用户对话框的显示与隐藏
      editDialogVisibel: false,

      //查询到的用户信息对象
      editFrom:{},


    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      const res = await this.$axios.get('http://localhost:7777/users', {
        params: this.queryInfo
      })

      // const { data: res } = await this.$http.get('users', {
      //   params: this.getUserList()

      // })
      if (res.status !== 200) return this.$message.error('获取用户列表失败')
      this.userlist = res.data.data
      this.total = res.data.data.length

      console.log(res)
      console.log(res.data.data.length);

      // const data = [
      //   {
      //     id: 1,
      //     username: "tige117",
      //     mobile: "18616358651",
      //     type: 1,
      //     email: "tige112@outlook.com",
      //     create_time: "2010-11-09T20:36:26.000Z",
      //     mg_state: true,
      //     role_name: "炒鸡管理员"
      //   },
      //   {
      //     id: 2,
      //     username: "tige212",
      //     mobile: "18616664441",
      //     type: 1,
      //     email: "tige212@outlook.com",
      //     create_time: "2016-11-09T20:36:26.000Z",
      //     mg_state: true,
      //     role_name: "教师"
      //   },
      //   {
      //     id: 5,
      //     username: "tige212",
      //     mobile: "18613336661",
      //     type: 1,
      //     email: "tige212@outlook.com",
      //     create_time: "2012-11-09T20:36:26.000Z",
      //     mg_state: true,
      //     role_name: "普通用户"
      //   },
      //   {
      //     id: 6,
      //     username: "tige312",
      //     mobile: "18616655551",
      //     type: 1,
      //     email: "tige312@outlook.com",
      //     create_time: "2018-11-09T20:36:26.000Z",
      //     mg_state: false,
      //     role_name: "普通用户"
      //   },
      // ]
    },
    // 监听 page size 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getUserList()
      // console.log(newSize);
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getUserList()
      // console.log(newPage);
    },
    //监听 switch 开关状态的改变
    userStateChanged(userinfo) {
      console.log(userinfo);
    },


    //监听添加用户对话框的关闭事件
    addDialogClosed() {
      //这个方法写 对话框关闭的时候 清空添加用户窗口里的数据
      console.log(this.$refs.addFormRef);

    },



    //展示用户编辑的对话框
    async showEditDialog(id) {
      this.editDialogVisibel = true
      // console.log(id);
    }


  }

}
</script>
